/*----------------------------------------*\
  TAG ITEM
\*----------------------------------------*/

/* TYPES */

.tag-item {
  @apply inline-flex items-center;
  @apply mr-3 md:mb-0.5 lg:mb-1;
  @apply focus:outline-none ring-0 no-underline;

  &,
  &:hover {
    @apply text-inherit; /* override general styling for links in main */
  }

  &:focus .tag-item__inner {
    @apply outline-none ring-2 ring-purple-500;
  }
}

.tag-item__inner {
  @apply inline-flex items-center;
  @apply px-4 2xl:px-5;
  @apply leading-tight;
  @apply rounded-full;
}

.tag-item__text {
  @apply inline-block;
  @apply py-1.5 xl:py-2;
  @apply text-left;
}

/* SIZES */

.tag-item,
.tag-item--base {
  @apply min-h-[44px] xl:min-h-[48px] 3xl:min-h-[52px];
  @apply text--base;
  @apply leading-5 lg:leading-6;
}

.tag-item--sm {
  @apply text--sm;
}

/* TYPES */

.tag-item,
.tag-item--default {
  .tag-item__inner {
    @apply bg-gray-200;
  }

  &:hover .tag-item__inner {
    @apply bg-gray-300;
  }
}

.tag-item--active {
  @apply pointer-events-none;

  .tag-item__inner {
    @apply text-white bg-gray-800;
  }
}

.tag-item--primary {
  .tag-item__inner {
    @apply text-white bg-gray-800;
  }

  &:hover .tag-item__inner {
    @apply bg-black;
  }
}

/* ICON */
.tag-item__icon {
  @apply h-full w-[1.5em];
  @apply relative left-[0.4em];
  @apply stroke-[0.3px] md:stroke-[0.35px] lg:stroke-[0.4px];
  @apply stroke-current;
}
